<template>
  <div class="left-content">
    <div class="top_one">
      <div class="img"></div>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
    </div>
    <ul class="ul">
      <li v-for="item in list">
        <div class="img"></div>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
    </ul>
    <div class="text">
        <!-- <textarea></textarea> -->
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4}"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
    </div>
    <div class="input">
        <!-- <input value="...."> -->
        <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable>
        </el-input>
    </div>
    <div class="send">
     <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button round>send</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftContent',
  data () {
    return {
      msg: 'Welcome to video',
      list:[1,2,3,4,5,6,7],
      input:'',
      textarea:'',
      options: [{
          value: '选项1',
          label: '条目一'
        }, {
          value: '选项2',
          label: '条目二'
        }, {
          value: '选项3',
          label: '条目三'
        }, {
          value: '选项4',
          label: '条目四'
        }, {
          value: '选项5',
          label: '条目五'
        }],
        value: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
  .left-content {
    padding: 10px;
    .top_one{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-content: center;
      justify-content: center;
      .img{
        width: 180px;
        height: 180px;
        background: #ffffff;
        margin-bottom: 10px;
        border-radius: 5px;
      }
      select{
        width: 180px;
      }
    }
    .ul{
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      li{
        width: 50%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        margin-top: 10px;
        &:nth-of-type(even){
          // margin-left: 2px;
        }
        .img{
          width: 80px;
          height: 80px;
          background: #ffffff;
          margin-bottom: 10px;
          border-radius: 5px;
        }
        .el-select{
          width: 80px;
        }
        
      }
    }
    .text{
      width: 100%;
      height: 100px;
      margin-top: 10px;
      textarea{
        width: 100%;
        height: 100%;
      }
    }
    .input{
       width: 100%;
      margin-top: 10px;
      input{
        width: 100%;
      }
    }
    .send{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      select{
        flex: 1;
      }
      button{
        margin-left: 5px;
      }
    }
  }
</style>
